Qu'est-ce que Flexbox ?

Modèle de disposition unidimensionnel : aligner et distribuer des éléments sur une ligne (ou colonne).

.container { display: flex; }

Idéal pour : barres de navigation, cartes, centrage, répartition d'espace.

Container et items

<div class="container">   <!-- flex container -->
    <div>Item 1</div>     <!-- flex item -->
    <div>Item 2</div>
</div>

• On active Flexbox sur le conteneur
• Ses enfants directs deviennent des items

Main axis et cross axis

• Axe principal (main) : défini par flex-direction
• Axe secondaire (cross) : perpendiculaire

justify-content agit sur l'axe principal ; align-items sur l'axe secondaire.

flex-direction

.container { display: flex; flex-direction: row; }

justify-content

Distribue l'espace le long de l'axe principal.

align-items

Aligne sur l'axe secondaire.

flex-wrap et gap

.container {
    display: flex;
    flex-wrap: wrap;   /* passe à la ligne si besoin */
    gap: 1rem;         /* espace entre items */
}

• nowrap (défaut) : tout sur une ligne
• wrap : retour à la ligne automatique
• gap : remplace les marges entre items

flex — répartition de l'espace

.item { flex: 1; }              /* prend tout l'espace dispo */
.fixe { flex: 0 0 200px; }      /* taille fixe 200px */

flex = flex-grow flex-shrink flex-basis

• flex: 1 sur plusieurs items → ils se partagent l'espace
• flex: 2 → prend deux fois plus de place

Cas d'usage : centrage parfait

.container {
    display: flex;
    justify-content: center;   /* horizontal */
    align-items: center;       /* vertical */
    min-height: 100vh;
}

Le Saint-Graal du centrage, en 3 lignes.

Cas d'usage : barre de navigation

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

Logo à gauche, liens à droite, alignés verticalement.

Exercice : carte de profil

Réaliser une carte avec avatar à gauche, infos à droite, le tout centré.

.card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
}
.card .avatar { flex: 0 0 80px; }
.card .infos  { flex: 1; }

Résumé Flexbox

Flexbox = une dimension. Pour deux dimensions → Grid.